<template>
  <view :style="colorStyle">
    <block v-if="showLoading">
      <x-skeleton
        type="list"
        :loading="true"
        v-for="(item, index, key) in 10"
        :key="key"
      >
        <view>列表</view>
      </x-skeleton>
    </block>
    <block v-if="!showLoading">
      <view class="infobox2">
        <view class="list">
          <view class="block1 flex aitems c1F1F1F f32 fontWeight">
            待收货 共{{ wuliuInfo.detailList.length }}个包裹
          </view>
          <view class="block2">
            <view
              class="goodslist flex"
              v-for="(item, index, key) in wuliuInfo.detailList"
              :key="key"
            >
              <image :src="item.goods.img" mode="aspectFill"></image>
              <view class="info1">
                <view class="tipbox1 flex aitems between">
                  <view class="tip1 ellipsis1 c1F1F1F f28">
                    {{ item.goods.name }}
                  </view>
                  <view class="tip2 c858585 f24"> X {{ item.goodsNum }} </view>
                </view>
                <view class="tipbox2 c858585 f24">
                  {{
                    item.goods.goodsSpec
                      .replace(/{/g, "")
                      .replace(/}/, "")
                      .replace(/"/g, "")
                  }}
                </view>
                <view class="tipbox3 flex aitems between">
                  <view class="tip1 c1F1F1F fontWeight">
                    <text class="f24">￥</text>
                    <text class="f32">{{ item.goods.goodsPrice }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="infobox1">
        <view class="block1 flex aitems c1F1F1F f32 fontWeight">
          <!-- <image src="@/static/img45.png" class="info1" mode=""></image> -->
          <view class="info2"> {{ wuliuInfo.logisticsName || "" }} </view>
          <view class="info2"> {{ wuliuInfo.logisticsNo || "" }} </view>
          <image
            src="@/static/img46.png"
            class="info3"
            mode=""
            @click="copy(wuliuInfo.logisticsName + wuliuInfo.logisticsNo)"
          ></image>
        </view>
        <view class="list">
          <view
            class="block2 flex"
            v-for="(item, index, key) in listData"
            :key="key"
          >
            <view
              class="border"
              :style="{ background: index == 0 ? '' : '#cccccc' }"
            >
            </view>
            <view
              class="info1 flex aitems jcenter"
              :style="{ border: index == 0 ? '' : '1px solid #cccccc' }"
            >
              <view
                class="tip1"
                :style="{ background: index == 0 ? '' : '#cccccc' }"
              >
              </view>
            </view>
            <view class="info2">
              <view
                :class="
                  index == 0
                    ? 'tip1 flex aitems themeColor f32 fontWeight'
                    : 'tip1 flex aitems c858585 f32 fontWeight'
                "
              >
                <view class=""> {{ item.status }} </view>
                <view
                  :class="index == 0 ? 'f28' : 'c858585 f24'"
                  style="margin-left: 30rpx; font-weight: normal"
                >
                  {{ item.time }}
                </view>
              </view>
              <view class="tip2 c858585 f24">
                {{ item.context }}
              </view>
              <!-- 	<view class="tip3 themeColor">
							商家备注：检查没事
						</view> -->
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import { orderTrack } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { getStorage, getToken } from "../../utils/storage";
import { back, showModal } from "../../utils/wxAPI";
export default {
  mixins: [colors],
  data() {
    return {
      options: {},
      listData: [],
      showLoading: true,
      info: {},
      wuliuInfo: {},
    };
  },
  onLoad(options) {
    this.options = options;
    let wuliuInfo = getStorage("wuliuInfo");
    console.log(wuliuInfo);
    this.wuliuInfo = wuliuInfo;
    if (getToken()) {
      this.orderTrack();
    }
  },
  methods: {
    copy(data) {
      uni.setClipboardData({
        data,
        success() {
          msg("复制成功");
        },
      });
    },
    async orderTrack() {
      let { data } = await orderTrack({
        id: this.options.ids,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        console.log(info);
        let body = JSON.parse(info.body);
        console.log(body);
        if (body.status == "200") {
          this.listData = body.data;
          this.info = body;
        } else {
          showModal({
            t2: body.message,
            btn1show: false,
          }).then(() => {
            back();
          });
        }
        this.showLoading = false;
      }
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  padding: 36rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .block1 {
    .info1 {
      width: 40rpx;
      height: 40rpx;
      border-radius: 40rpx;
    }

    .info2 {
      margin: 0 16rpx 0 8rpx;
    }

    .info3 {
      width: 32rpx;
      height: 32rpx;
    }
  }

  .list {
    .block2 {
      position: relative;
      margin: 36rpx 0 48rpx;

      .border {
        position: absolute;
        width: 1px;
        bottom: -38rpx;
        background: var(--view-theme);
        left: 22rpx;
        top: 46rpx;
      }

      .info1 {
        position: relative;
        top: 2rpx;
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        border: 1px solid var(--view-theme);

        .tip1 {
          background: var(--view-theme);
          border-radius: 50%;
          width: 36rpx;
          height: 36rpx;
        }
      }

      .info2 {
        margin-left: 20rpx;
        width: calc(100% - 20rpx - 44rpx);

        .tip1 {
        }

        .tip2 {
          margin: 16rpx 0 0;
        }

        .tip3 {
          margin: 18rpx 0 0;
          padding: 30rpx 24rpx;
          border-radius: 28rpx;
          background: var(--view-op-ten);
        }
      }
    }
  }
}

.infobox2 {
  .list {
    padding: 32rpx 24rpx 1rpx;
    background: #fff;
    border-radius: 28rpx;
    margin: 30rpx 30rpx 0;

    .block1 {
      .info1 {
        width: 40rpx;
        height: 40rpx;
        border-radius: 40rpx;
      }

      .info2 {
        margin: 0 16rpx 0 8rpx;
      }

      .info3 {
        width: 32rpx;
        height: 32rpx;
      }
    }

    .block2 {
      margin: 24rpx 0 0;

      .goodslist {
        margin: 0 0 24rpx 0;

        image {
          width: 152rpx;
          height: 152rpx;
          border-radius: 28rpx;
        }

        .info1 {
          width: calc(100% - 152rpx - 20rpx);
          margin-left: 20rpx;

          .tipbox1 {
            .tip1 {
              width: 400rpx;
            }

            .tip2 {
            }
          }

          .tipbox2 {
            margin: 16rpx 0 0;
          }

          .tipbox3 {
            margin: 21rpx 0 0;

            .tip1 {
            }

            .tip2 {
              border-radius: 40rpx;
              border: 1px solid #ccc;
              padding: 21rpx 34rpx;
            }
          }
        }
      }
    }
  }
}
</style>
